<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-09 15:15:53
-->

<template>
  <div class="head">
    <!-- 顶头 -->
    <div class="head_top">
      <div class="wrapper">
        <!-- logo -->
        <div class="logo">
          <img
            src="../../../public/resources/images/logo.png"
            @click="toHomeHandler()"
          />
        </div>
        <!-- /logo -->
        <!-- 搜索 -->
        <div class="search">
          <input class="frame" placeholder="请输入搜索关键词.." />
        </div>
        <!-- /搜索 -->
      </div>
    </div>
    <!-- /顶头 -->
    <!-- 底头 -->
    <div class="bothead">
      <ul class="menu">
        <li class="menu_item" v-for="c in CategoryTree" :key="c.id">
          <div @click="toListHandler(c)">{{ c.name }}</div>
          <ul class="sub_menu">
            <li
              v-for="sc in c.children"
              :key="sc.id"
              @click="toListHandler(sc)"
            >
              {{ sc.name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /底头 -->
  </div>
</template>
<script>
import { get } from "../../utils/request";
export default {
  data() {
    return {
      CategoryTree: [],
    };
  },
  created() {
    this.loadCategoryTree();
  },
  methods: {
    // 跳转

    toHomeHandler() {
      this.$router.push({
        path: "/home",
      });
    },
    toListHandler(CategoryTree) {
      this.$router.push({
        path: "/list",
        query: CategoryTree,
      });
    },

    // 加载栏目信息
    loadCategoryTree() {
      let url = "/index/category/findCategoryTree";
      get(url).then((resp) => {
        this.CategoryTree = resp.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
//头部样式
.head {
  //顶头样式
  .head_top {
    background-image: linear-gradient(#06312c, #31776f);

    & > .wrapper {
      display: flex;
      justify-content: space-between;
      position: relative;
    }
  }
  .logo {
    img {
      height: 70px;
      margin: 29px;
      margin-left: 200px;
      cursor: pointer;
    }
  }
  .frame {
    position: absolute;
    bottom: 29px;
    right: 129px;
  }
  .bothead {
    background-color: #b39858;
    height: 38px;
    color: #fff;
  }

  .bothead ul.menu {
    height: 100%;
    margin-left: 300px;
    margin-right: 243px;

    font-size: 17px;
  }
  .bothead ul.menu::after {
    display: block;
    content: "";
    clear: both;
  }
  .bothead ul.menu > li.menu_item {
    float: left;
    width: 129.15px;
    text-align: center;
    position: relative;
    height: 31px;
    padding-top: 7px;
    cursor: pointer;
  }
  .bothead ul.menu > li.menu_item:hover {
    background-color: #8c6301;
  }
  .bothead ul.menu > li.menu_item:hover ul.sub_menu {
    display: block;
  }
  .bothead ul.menu ul.sub_menu {
    display: none;
    position: absolute;
    width: 129.15px;
    z-index: 7;
    top: 38px;
  }

  .bothead ul.menu ul.sub_menu > li {
    height: 31px;
    text-align: center;
    padding-top: 7px;
    margin-top: 3.5px;
    background-color: #b39858;
  }
  .bothead ul.menu ul.sub_menu > li:hover {
    background-color: #8c6301;
    color: #fff;
  }
}
</style>